<template>
    <!-- 管理后台主界面组件 -->
    <div class="admin-window">
        <div class="title drag">商城后台管理界面</div>
        <div class="body-content">
            <div class="left-side">
                <div :class="['menu-item', item.path == route.path ? 'active' : '']" @click="menuJump(item)"
                    v-for="(item, index) in menuList" :key="index">
                    <div :class="['iconfont', item.icon]" :style="{ background: item.iconBgColor }"></div>
                    <div class="text">{{ item.name }}</div>
                </div>
            </div>
            <div class="right-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch, onUnmounted } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const menuList = ref([
    {
        name: '商品管理',
        icon: 'icon-shangpinguanli',
        path: '/admin/itemList',
        iconBgColor: '#f39c12'
    },
    {
        name: '用户管理',
        icon: 'icon-yonghu',
        path: '/admin/userList',
        iconBgColor: '#2d8cf0'
    },
    {
        name: '地址管理',
        icon: 'icon-dizhi',
        path: '/admin/addressList',
        iconBgColor: '#19be6b'
    },
    {
        name: '订单管理',
        icon: 'icon-dingdan',
        path: '/admin/orderList',
        iconBgColor: '#f5222d'
    },
    {
        name: '支付管理',
        icon: 'icon-zhifuchenggong',
        path: '/admin/payOrderList',
        iconBgColor: '#1296db'
    },
    {
        name: '物流管理',
        icon: 'icon-wuliu',
        path: '/admin/logisticsList',
        iconBgColor: '#2db7fa'
    },
])

const menuJump = (item) => {
    router.push(item.path);
}

</script>

<style lang="scss" scoped>
.admin-window {
    padding: 0px;
    border: 1px solid#ddd;
    background: #fff;
    position: relative;
    overflow: hidden;

    .title {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid#ddd;
        text-align: center;
        font-weight: bold;
    }

    .body-content {
        height: calc(100vh - 42px);
        display: flex;

        .left-side {
            width: 200px;
            border-right: 1px solid #ddd;
            background: #e6e5e5;

            .menu-item {
                display: flex;
                align-items: center;
                padding: 10px 10px;
                position: relative;

                &:hover {
                    cursor: pointer;
                    background: #d6d6d6;
                }

                .iconfont {
                    width: 35px;
                    height: 35px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    color: #fff;
                }

                .text {
                    flex: 1;
                    color: #000000;
                    margin-left: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .active {
                background: #c4c4c4;

                &:hover {
                    background: #c4c4c4;
                }
            }
        }

        .right-content {
            flex: 1;
            padding: 10px;
        }
    }
}
</style>
